<template>
  <div class="sport">
    <div class="top g-flex">
      <div class="left g-flex">
        <div class="left-item">
          <div class="left-num">{{ sportRank.totalTime || 0 }}分钟</div>
          <div class="left-text">总累计运动时长</div>
        </div>
        <div class="left-item">
          <div class="left-num">{{ sportRank.courseNum || 0 }}</div>
          <div class="left-text">总累计课次</div>
        </div>
        <div class="left-item">
          <div class="left-num">
            {{ (sportRank.totalCle && sportRank.totalCle.toFixed()) || 0 }}千卡
          </div>
          <div class="left-text">总累计消耗卡路里</div>
        </div>
        <div class="left-item">
          <div class="left-num">{{ sportRank.totalCk || 0 }}</div>
          <div class="left-text" @click="showTips">
            <div>累计CK值</div>
            <img
              src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport_wenhao.png"
              class="wenhao"
            />
          </div>
        </div>
      </div>
      <div class="right" @click="goSportRank">
        <div class="rank">
          <img
            src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport_jiangbei_2.png"
            alt=""
            srcset=""
            class="jiangbei"
          />
          <div class="rank">{{ sportRank.sort || "--" }}</div>
          <!-- <div class="rank">--</div> -->
        </div>
        <div class="des">
          <div class="name">排行榜 <span class="arrow">></span></div>
          <div class="text">周累计时长排行</div>
        </div>
      </div>
    </div>
    <!-- 日历 -->
    <sport-calendar />

    <div class="nav-list">
      <div class="nav-item" @click="appointToIndex">
        <div class="item-left">
          <div class="item-left-title">团课预约</div>
          <div class="item-left-sub-title">GrpBook​</div>
        </div>
        <img
          src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/1_2x.png"
          class="nav-item-icon"
        />
      </div>
      <div class="nav-item" @click="handlerGotoOnlineCourse">
        <div class="item-left">
          <div class="item-left-title">线上课程</div>
          <div class="item-left-sub-title">eCourse​</div>
        </div>
        <img
          src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/2_2x.png"
          class="nav-item-icon"
        />
      </div>
    </div>
    <!-- 我的课程预约 -->
    <div class="course-appointment-box">
      <!-- TODO isVipUser替换为真实数据 -->
      <course-appointment
        :isVipUser="false"
        :list="orderList"
        @clickItem="handlerGotoOrderDetail"
        @clickAppointment="appoint"
        @clickMore="handlerGotoOrderList"
      />
    </div>
    <!-- 运动记录 -->
    <div class="sport-record-box">
      <div class="sport-record-title">运动记录</div>
      <div
        class="sport-record-list"
        v-if="sportList.userSportSimpleDTOs.length"
      >
        <div
          class="sport-record-item"
          v-for="item in sportList.userSportSimpleDTOs"
          :key="item.id"
          @click="goSportDetails(item.bindHistoryId)"
        >
          <img class="img" :src="item.courseCover" mode="aspectFill"></img>
          
          <div class="right">
            <div class="row">
              <img
                src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport_item_icon_1.png"
                class="row_icon"
              />
              <div class="name">时间：</div>
              <div class="des">
                {{ (item.createDt && item.createDt.split(" ")[0]) || "--" }}
              </div>
            </div>
            <div class="row">
              <img
                src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport_item_icon_2.png"
                class="row_icon"
              />
              <div class="name">运动时长：</div>
              <div class="des">{{ item.sportMinutes || 0 }}分钟</div>
            </div>
            <div class="row">
              <img
                src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport_item_icon_3.png"
                class="row_icon"
              />
              <div class="name">运动类型：</div>
              <div class="des">{{ item.courseName || "--" }}</div>
            </div>
          </div>
          <img
            src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sport-item-icon-go.png"
            class="nav"
          />
        </div>
        <div class="load-more" v-if="sportPatams.hasMore" @click="loadMore">
          <div class="load-more-text">查看更多</div>
        </div>
      </div>
      <div
        v-else
        class="nodata"
      >
        还没有运动记录，现在就动起来！
        <img
            src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/sportpage_no_sport_list.png"
            class="nodata_pic"
          />
      </div>
    </div>
  </div>
</template>

<script setup>
import setTab from "@/functions/useSetTab";
import { onShow } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import Api from "@/service";
import useLogin from "@/functions/useLogin";

const loginS = useLogin();

const sportRank = ref({
  totalTime: 0,
  courseNum: 0,
  totalCle: 0,
  totalCk: 0,
  sort: 0,
});
const sportList = ref({
  userSportSimpleDTOs: [],
  total: 0,
});

const orderList = ref([]);
const getApiontment = async () => {
  const res = await Api.course.getCourseOrderList(null,null,'1',1,3);
  if (
    res &&
    res.status === 200 &&
    res.data &&
    res.data?.courseOrders &&
    res.data?.courseOrders.length > 0
  ) {
    orderList.value = res.data?.courseOrders || [];
  } else {
    orderList.value = [];
  }
};

// 获取运动排行榜
const getSportRank = async (userId) => {
  const res = await Api.sport.getSportTotal(userId);
  if (res.data) {
    sportRank.value = res.data;
  }
  console.log("getSportRank", res);
};
// 获取运动列表
const sportPatams = ref({
  page: 1,
  size: 3,
  hasMore: true
})
const getSportList = async (userId) => {
  const res = await Api.sport.getSportList(userId, sportPatams.value.page, sportPatams.value.size);
  if (sportPatams.value.page === 1) {
    sportList.value = res.data;    
  } else {
    sportList.value.userSportSimpleDTOs = [...sportList.value.userSportSimpleDTOs, ...res.data.userSportSimpleDTOs];
  }

  if(res.data.userSportSimpleDTOs.length < 3){
    sportPatams.value.hasMore  = false
  }
  console.log("getSportList", res);
};

const loadMore = async () => {
  if (!sportPatams.value.hasMore) return;
  sportPatams.value.page += 1;
  const userId = loginS.userInfo.value?.userId;
  await getSportList(userId);
};

// ck值名词解释
const showTips = () => {
  uni.showToast({
    title: "代表单位体重消耗的卡路里",
    icon: "none",
  });
};
// 前往运动详情
const goSportDetails = (bindHistoryId) => {
  uni.navigateTo({
    url:
      "/subPackages_1/sport-details/sport-details?bindHistoryId=" +
      bindHistoryId,
  });
};

const handlerGotoOrderDetail = (item) => {
  // uni.navigateTo({
  //   url: "/pages/my/order/index",
  // });
};

const handlerGotoOrderList = async (e) => {
  const flag = await loginS.checkLogin();
  if (flag) {
    console.log("去订单列表");
    uni.navigateTo({
      url: "/pages/my/order/index",
    });
  }
};

const appointToIndex = async () => {
  const flag = await loginS.checkLogin();
  if (flag) {
    uni.switchTab({
      url: "/pages/index/index",
    });
  }
};

const appoint = async (e) => {
  const flag = await loginS.checkLogin();
  if (flag) {
    uni.navigateTo({
      url: "/pages/my/courseorder/index",
    });
  }
};

const handlerGotoOnlineCourse = async () => {
  const flag = await loginS.checkLogin();
  if (flag) {
    uni.openChannelsUserProfile({
      finderUserName: "sphwGAsA42wH0ew",
    });
  }
};

const goSportRank = async () => {
  const flag = await loginS.checkLogin();
  const userId = loginS.userInfo.value?.userId;
  if (flag) {
    uni.navigateTo({
      url: "/subPackages_1/sport-rank/sport-rank?userId=" + userId,
    });
  }
};

onShow(async () => {
  setTab(1);
  const flag = await loginS.checkLogin(true);
  const userId = loginS.userInfo.value?.userId;
  if (flag) {
    getSportRank(userId);
    getSportList(userId);
    getApiontment(); //获取最近预约
  }
});
</script>

<style scoped lang="scss">
.sport {
  padding-bottom: 200rpx;
  box-sizing: border-box;

  .top {
    padding: 36rpx 24rpx;
    box-sizing: border-box;

    .left {
      flex: 1;
      flex-wrap: wrap;

      .left-item {
        width: 244rpx;
        height: 172rpx;
        background: #ffffff;
        border-radius: 40rpx;
        margin-right: 16rpx;
        margin-bottom: 16rpx;
        padding: 28rpx;
        box-sizing: border-box;

        &:nth-child(2n) {
          margin-right: 0;
        }

        .left-num {
          position: relative;
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;
          text-align: left;
          padding-left: 18rpx;
          box-sizing: border-box;

          &:before {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            display: block;
            width: 6rpx;
            height: 24rpx;
            background: #d7d2e9;
            border-radius: 4rpx;
          }
        }

        .left-text {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding-top: 30rpx;
          box-sizing: border-box;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 48rpx;
          text-align: left;
          font-style: normal;

          .wenhao {
            width: 48rpx;
            height: 48rpx;
          }
        }
      }
    }

    .right {
      flex-shrink: 0;
      width: 182rpx;
      height: 360rpx;
      background: #ffffff;
      border-radius: 40rpx;

      .rank {
        position: relative;
        width: 150rpx;
        height: 184rpx;
        padding-top: 16rpx;
        text-align: center;
        box-sizing: border-box;
        margin: 0 auto;

        .jiangbei {
          width: 150rpx;
          height: 184rpx;
        }

        .rank {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          font-weight: 600;
          font-size: 60rpx;
          color: #7966b3;
          line-height: 84rpx;
          text-align: center;
          font-style: normal;
        }
      }

      .des {
        padding-top: 18rpx;
        box-sizing: border-box;

        .name {
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #333333;
          line-height: 44rpx;
          text-align: center;
          font-style: normal;

          .arrow {
            display: block;
            margin-bottom: 4rpx;
            margin-left: 8rpx;
            color: #999999;
          }
        }

        .text {
          padding-top: 30rpx;
          box-sizing: border-box;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          line-height: 34rpx;
          text-align: center;
          font-style: normal;
        }
      }
    }
  }

  .nav-list {
    padding: 0 24rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 36rpx;

    .nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 340rpx;
      background: #ffffff;
      border-radius: 40rpx;
      padding: 28rpx 32rpx;
      box-sizing: border-box;

      .item-left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .item-left-title {
          font-size: 28rpx;
          color: #333333;
          margin-bottom: 36rpx;
          font-size: 32rpx;
          font-weight: 600;
        }

        .item-left-sub-title {
          font-size: 24rpx;
          color: #999999;
        }
      }

      .nav-item-icon {
        width: 130rpx;
        height: 130rpx;
      }
    }
  }

  .course-appointment-box {
    padding: 0 24rpx;
    box-sizing: border-box;
  }

  .sport-record-box {
    padding: 0 24rpx;
    box-sizing: border-box;

    .sport-record-title {
      padding-top: 52rpx;
      padding-bottom: 32rpx;
      font-size: 36rpx;
      color: #333333;
      font-weight: 600;
      box-sizing: border-box;
    }

    .sport-record-list {
      width: 702rpx;
      background: #ffffff;
      border-radius: 40rpx;
      padding-left: 32rpx;
      padding-right: 32rpx;
      box-sizing: border-box;

      .load-more {
        padding: 30rpx 0;
        text-align: center;
        .load-more-text {
          color: #7966b3;
          font-size: 28rpx;
        }
      }

      .sport-record-item {
        position: relative;
        display: flex;
        align-items: center;
        padding-top: 40rpx;
        padding-bottom: 40rpx;
        border-bottom: 1px solid #c4d1e3;
        box-sizing: border-box;

        &:last-child {
          border-bottom: none;
        }

        .img {
          width: 140rpx;
          height: 140rpx;
          // background: #efeeee;
          border-radius: 12rpx;
          margin-right: 32rpx;
        }

        .right {
          .row {
            display: flex;
            align-items: center;
            margin-bottom: 10rpx;

            .row_icon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 12rpx;
            }

            .name {
              font-size: 28rpx;
              color: #333333;
              line-height: 40rpx;
              margin-right: 6rpx;
            }

            .des {
              font-size: 28rpx;
              color: #999999;
              line-height: 40rpx;
            }
          }
        }

        .nav {
          position: absolute;
          right: 32rpx;
          top: 40rpx;
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
    .nodata{
      position: relative;
      width: 702rpx;
      height: 120rpx;
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 12rpx 0rpx #F5F6FF;
      border-radius: 40rpx;
      padding: 40rpx 32rpx;
      box-sizing: border-box;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      .nodata_pic{
        width: 254rpx;
        height: 154rpx;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>